<!--我的督办页面-->
<script setup>
import SQuery from '@/views/workOrder/components/SQuery.vue'
import { Toast } from 'vant'
import { getPageSuperviseApi } from '@/apis/order.js'
import StatusSelect from '@/views/supervise/components/StatusSelect.vue'
import SuperviseItem from '@/views/supervise/components/SuperviseItem.vue'
import NoData from '@/components/NoData.vue'

const isShowSuperviseStatus = ref(false)

const state = reactive({
  tableData: [],
  statusList: [{ label: '全部', value: '', disable: false }],
  superviseStatus: [
    { label: '全部', value: '', disable: false },
    { label: '待反馈', value: '1', disable: false },
    { label: '已反馈', value: '2', disable: false }
  ],
  loading: false,
  lockLoading: false,
  refreshLoading: false,
  finished: false,
  queryField: {
    type: '', // 督办反馈状态 1未反馈, 2已反馈
    pageIndex: 1,
    pageSize: 10
  }
})

const queryTitle = computed(() => state.statusList[0].label)
// 筛选弹窗操作
const timeConfirm = () => {
  isShowSuperviseStatus.value = true
}
// 获取接口数据
const getDisposeOrder = async (type) => {
  if (state.lockLoading) return
  state.lockLoading = true
  await getPageSuperviseApi(state.queryField)
    .then((res) => {
      if (res.ret === 0) {
        const temp = res.data.list
        if (type === 'refresh') {
          state.tableData = temp
        } else {
          state.tableData.push(...temp)
        }
        state.queryField.pageIndex++
        const pageNum = parseInt(res.data.pageination.totalPage)
        if (state.queryField.pageIndex > pageNum) {
          state.finished = true
        }
      } else {
        Toast.fail(res.msg)
        state.finished = true
      }
    })
    .catch((error) => {
      console.error('请求失败:', error)
      state.finished = true
    })
  state.loading = false
  state.lockLoading = false
  state.refreshLoading = false
}

// 获取接口数据
const initSuperviseDate = async () => {
  state.queryField.pageIndex = 1
  state.finished = false
  await getDisposeOrder('refresh')
}

// 处理状态查询确定
const statusChange = async (e) => {
  if (e.length > 0) {
    state.queryField.type = e[0].value
  } else {
    state.queryField.type = ''
  }
  await initSuperviseDate()
}

onMounted(async () => {
  await initSuperviseDate()
})
</script>

<template>
  <section
    class="flex flex-col w-full p-0 pt-30px h-full box-border overflow-x-hidden bg-#F0F2F5"
  >
    <div
      class="z-10 bg-#F0F2F5 w-full h-30px box-border absolute top-0 left-0 text-14px text-#71747a flex items-center justify-between m-t-0px mx-10px p-10px"
    >
      <SQuery
        :show.sync="isShowSuperviseStatus"
        :title="queryTitle"
        :active="queryTitle !== ''"
        @confirm="timeConfirm"
      />
    </div>
    <div class="flex-1">
      <NoData :white="false" v-if="state.tableData.length === 0" />
      <van-pull-refresh
        v-model="state.refreshLoading"
        @refresh="initSuperviseDate"
      >
        <van-list
          v-model="state.loading"
          :finished="state.finished"
          @load="getDisposeOrder"
          finished-text="没有更多了~"
        >
          <SuperviseItem
            v-for="item in state.tableData"
            :key="item.id"
            :item="item"
          />
        </van-list>
      </van-pull-refresh>
    </div>
    <!-- 处理状态 -->
    <StatusSelect
      :model-value.sync="state.statusList"
      :options="state.superviseStatus"
      :show.sync="isShowSuperviseStatus"
      @confirm="statusChange"
    />
  </section>
</template>

<style lang="less" scoped></style>
